<template>
  <div class="home-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon"><House /></el-icon>
          {{ homeStore.welcomeMessage }}
        </h1>
        <p class="page-subtitle">管理系统概览</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="home-content">
      <!-- 系统信息卡片 -->
      <div class="info-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon><InfoFilled /></el-icon>
            系统信息
          </h3>
        </div>
        <div class="card-content">
          <div class="system-info">
            <h4>{{ homeStore.systemInfo.title }}</h4>
            <p>{{ homeStore.systemInfo.description }}</p>
            <div class="features">
              <h5>主要特性：</h5>
              <ul>
                <li v-for="feature in homeStore.systemInfo.features" :key="feature">
                  <el-icon><Check /></el-icon>
                  {{ feature }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 统计数据卡片 -->
      <div class="stats-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon><TrendCharts /></el-icon>
            数据统计
          </h3>
        </div>
        <div class="card-content">
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-icon users">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ homeStore.stats.totalUsers }}</div>
                <div class="stat-label">总用户数</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon orders">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ homeStore.stats.totalOrders }}</div>
                <div class="stat-label">总订单数</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon revenue">
                <el-icon><Money /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ homeStore.stats.totalRevenue }}</div>
                <div class="stat-label">总收入</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon online">
                <el-icon><Connection /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ homeStore.stats.onlineUsers }}</div>
                <div class="stat-label">在线用户</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { 
  House, InfoFilled, Check, TrendCharts, User, 
  Document, Money, Connection 
} from '@element-plus/icons-vue'
import { useHomeStore } from '@/stores/home/homeStore'

const homeStore = useHomeStore()

// 初始化
onMounted(() => {
  homeStore.loadStats()
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

// 主容器
.home-container {
  @include page-container;

  // 页面标题
  .page-header {
    @include page-header;
  }

  // 主要内容区域
  .home-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;

    // 信息卡片
    .info-card {
      @include card-style;
      overflow: hidden;

      .card-header {
        padding: 20px 24px;
        background: $background-color;
        border-bottom: 1px solid $border-color;

        .card-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: $text-color;
          margin: 0;
        }
      }

      .card-content {
        padding: 24px;

        .system-info {
          h4 {
            font-size: 20px;
            font-weight: 600;
            color: $text-color;
            margin: 0 0 12px 0;
          }

          p {
            color: $text-color-secondary;
            line-height: 1.6;
            margin: 0 0 20px 0;
          }

          .features {
            h5 {
              font-size: 16px;
              font-weight: 600;
              color: $text-color;
              margin: 0 0 12px 0;
            }

            ul {
              list-style: none;
              padding: 0;
              margin: 0;

              li {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 0;
                color: $text-color-secondary;

                .el-icon {
                  color: $primary-color;
                }
              }
            }
          }
        }
      }
    }

    // 统计卡片
    .stats-card {
      @include card-style;
      overflow: hidden;

      .card-header {
        padding: 20px 24px;
        background: $background-color;
        border-bottom: 1px solid $border-color;

        .card-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: $text-color;
          margin: 0;
        }
      }

      .card-content {
        padding: 24px;

        .stats-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;

          .stat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: $background-color;
            border-radius: 8px;
            transition: all 0.3s;

            &:hover {
              background: $gray-200;
              transform: translateY(-2px);
            }

            .stat-icon {
              width: 40px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: $white;
              font-size: 18px;

              &.users { background: linear-gradient(135deg, #409eff, #67c23a); }
              &.orders { background: linear-gradient(135deg, #e6a23c, #f56c6c); }
              &.revenue { background: linear-gradient(135deg, #f56c6c, #e6a23c); }
              &.online { background: linear-gradient(135deg, #67c23a, #409eff); }
            }

            .stat-content {
              flex: 1;

              .stat-value {
                font-size: 20px;
                font-weight: 600;
                color: $text-color;
                margin-bottom: 4px;
              }

              .stat-label {
                font-size: 12px;
                color: $text-color-placeholder;
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home-container .home-content {
    grid-template-columns: 1fr;
    gap: 20px;

    .stats-card .card-content .stats-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>